<template>
  <el-dialog
    title="查看撤回申请"
    :model-value="dialogVisible"
    @close="handleClose"
    width="800px"
    class="custom-dialog"
    :close-on-click-modal="false"
  >
    <el-descriptions :column="1" border class="custom-descriptions">
      <el-descriptions-item label="审批编号">
        {{ formData.approvalNo || '-' }}
      </el-descriptions-item>
      <el-descriptions-item label="需求编号">
        {{ formData.requirementNo || '-' }}
      </el-descriptions-item>
      <el-descriptions-item label="需求名称">
        {{ formData.requirementName || '-' }}
      </el-descriptions-item>
      <el-descriptions-item label="关联合同名称">
        {{ formData.contractName || '-' }}
      </el-descriptions-item>
      <el-descriptions-item label="撤回原因">
        {{ formData.withdrawReason || '-' }}
      </el-descriptions-item>
      <!-- 将审批流程放入el-descriptions-item中 -->
      <el-descriptions-item label="审批流程" :span="2">
        <el-timeline>
          <el-timeline-item
            v-for="(item, index) in formData.approvalFlow" 
            :key="index"
            :type="getTimelineType(item.status)"
            :icon="getTimelineIcon(item.status)"
          >
            <div class="approval-item">
              <div class="approval-title">
                {{ item.title }}
              </div>
              <div class="approval-approver">
                审批人：{{ item.approver }}
              </div>
              <div class="approval-content">
                审批意见：
                {{ item.status === 'approved' ? '同意' : '拒绝' }}
              </div>
              <div class="approval-time">
                审批完成时间：{{ item.time }}
              </div>
            </div>
          </el-timeline-item>
        </el-timeline>
      </el-descriptions-item>
    </el-descriptions>
    
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup name="widthdrawApplication">
import { ref, reactive, watch } from 'vue'
import { Check, Clock, Close } from '@element-plus/icons-vue'

// 定义props
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  applicationData: {
    type: Object,
    default: () => ({})
  }
})

// 定义emits
const emit = defineEmits(['update:modelValue', 'close'])

// 本地响应式状态
const dialogVisible = ref(false)
const formData = reactive({
  approvalNo: '',
  requirementNo: '',
  requirementName: '',
  contractName: '',
  withdrawReason: '',
  approvalFlow: []
})

// 监听props中的modelValue变化
watch(
  () => props.modelValue,
  (newVal) => {
    dialogVisible.value = newVal
    if (newVal && props.applicationData) {
      // 当弹窗显示时，从applicationData中加载数据
      formData.approvalNo = props.applicationData.approvalNo || 'SPBH' + Date.now()
      formData.requirementNo = props.applicationData.requirementNo || ''
      formData.requirementName = props.applicationData.requirementName || ''
      formData.contractName = props.applicationData.contractName || ''
      formData.withdrawReason = props.applicationData.withdrawReason || ''
      formData.approvalFlow = props.applicationData.approvalFlow || []
    }
  },
  { immediate: true }
)

// 监听本地dialogVisible变化，通知父组件
watch(
  dialogVisible,
  (newVal) => {
    emit('update:modelValue', newVal)
  }
)

// 关闭弹窗
function handleClose() {
  dialogVisible.value = false
  emit('close')
}

// 获取时间线类型
function getTimelineType(status) {
  switch (status) {
    case 'approved':
      return 'success'
    case 'rejected':
      return 'danger'
    default:
      return 'primary'
  }
}

// 获取时间线图标
function getTimelineIcon(status) {
  switch (status) {
    case 'approved':
      return Check
    case 'rejected':
      return Close
    default:
      return Clock
  }
}
</script>

<style scoped>
/* 对话框样式 */
:deep(.custom-dialog .el-dialog__header) {
  background-color: #f5f7fa;
  padding: 16px 20px;
  border-bottom: 1px solid #ebeef5;
}

:deep(.custom-dialog .el-dialog__title) {
  font-size: 16px;
  font-weight: 500;
}

:deep(.custom-dialog .el-dialog__body) {
  padding: 20px;
  max-height: 70vh;
  overflow-y: auto;
}

:deep(.custom-dialog .el-dialog__footer) {
  padding: 16px 20px;
  border-top: 1px solid #ebeef5;
  background-color: #fafafa;
}

/* 自定义描述列表样式 */
.custom-descriptions {
  width: 100%;
}

:deep(.custom-descriptions .el-descriptions__item) {
  display: flex;
  align-items: center;
}

:deep(.custom-descriptions .el-descriptions__label) {
  width: 140px;
  font-weight: 500;
  color: #606266;
  text-align: left;
  background-color: #f5f7fa;
  padding: 18px 20px;
  border-right: 1px solid #ebeef5;
}

:deep(.custom-descriptions .el-descriptions__content) {
  flex: 1;
  color: #303133;
  padding: 18px 20px;
  background-color: #ffffff;
  display: flex;
  align-items: flex-start;
}

/* 对话框底部按钮 */
.dialog-footer {
  display: flex;
  justify-content: flex-end;
}

/* 确保单元格边框正确显示 */
:deep(.custom-descriptions .el-descriptions__cell) {
  padding: 6px !important;
  border-bottom: 1px solid #ebeef5;
}

:deep(.custom-descriptions .el-descriptions__row:last-child .el-descriptions__cell) {
  border-bottom: none;
}
</style>